
<!-- 地图思路 -->
<template>
    <div>
        百度地图展示
        <div id="allmap" class="allmap"></div>
        <div id="result">从北京站到北京欢乐谷的步行导航</div>
    </div>
</template>

<script>
export default {
    name: 'baiMap',
    data() {
        return {};
    },
    methods: {
        deawMap() {
            //地图初始化
            // this.map = new BMap.Map('allmap'); //创建地图实例

            // this.map.addControl(new BMap.NavigationControl()); //添加GPS marker// 启用放大缩小 尺
            // var point = new BMap.Point(116.404, 39.915); // 创建点坐标
            // this.map.enableScrollWheelZoom();
            // this.map.centerAndZoom(point, 13); // 初始化地图，设置中心点坐标和地图级别

            // var markergg = new BMap.Marker(point, {
            //     enableDragging: true //可拖拽
            // });
            // this.map.addOverlay(markergg);

            // --------------------------------------------------------------------------------
            var map = new BMapGL.Map('allmap');
            map.enableScrollWheelZoom();
            map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
            var walking = new BMapGL.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true } });
            walking.search('北京天安门', '北京欢乐谷');
        }
    },
    mounted() {
        this.$nextTick(function () {
            this.deawMap();
        });
    }
};
</script>

<style lang="scss" scoped>
.allmap {
    width: 100%;
    height: 1000px;
    font-family: '微软雅黑';
    border: 1px solid green;
}
#result {
    position: fixed;
    top: 132px;
    left: 137px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    border-radius: 7px;
    z-index: 99;
}
// .el-tag {
//     cursor: pointer;
// }
</style>
<!-- <template>
  <div>
    <baidu-map :center="{lng:106.736666,lat:30.326666} " zoom="17" style="height:550px; width: 100%"></baidu-map>
        lng:经度  lat：纬度
  </div>
</template> -->
